<template>
  <el-dialog :title="memberForm.memberId ? '修改子卡' : '新增子卡'" width="800px" :visible.sync="dialogMemberVisible">
    <el-form ref="memberRef" :model="memberForm" label-position="right" label-width="120px" :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="子卡名称:" prop="memberName">
            <el-input v-model="memberForm.memberName" placeholder="请输入" maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电话号码:" prop="phoneNum">
            <el-input v-model="memberForm.phoneNum" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车牌:" prop="carNo">
            <el-input v-model="memberForm.carNo" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生日期:">
            <el-date-picker v-model="memberForm.birthday" type="date" placeholder="选择日期" format="yyyy-MM-dd"
              value-format="yyyy-MM-dd" style="width: 100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="会员卡号:">
            <el-input v-model="memberForm.card" placeholder="请输入" :disabled="memberForm.useEcard">
              <template slot="append">
                <el-checkbox v-model="memberForm.useEcard">使用虚拟卡</el-checkbox>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="加油密码:">
            <el-input v-model="memberForm.fuelPwd" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="单次最大限额:">
            <el-input v-model="memberForm.timesUpperLimit" value="9999" placeholder="请输入">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单日最大限额:">
            <el-input v-model="memberForm.dailyUpperLimit" value="99999" placeholder="请输入">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="单月最大限额:">
            <el-input v-model="memberForm.monthUpperLimit" value="999999" placeholder="请输入">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">

        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="校验车牌:">
            <el-radio-group v-model="memberForm.checkCarNo">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="校验员工卡:">
            <el-radio-group v-model="memberForm.checkEmpCard">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelFn('memberRef', 'dialogMemberVisible')">取 消</el-button>
      <el-button type="primary" @click="saveMember" v-loading="saveLoading">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {
    saveMember,
    updateMember
  } from '@/api/fleet'
  import {
    deepClone
  } from '@/utils';
  import {
    validator
  } from '@/utils/validate';
  export default {
    name: 'addSubCard',
    props: {
      stationOptions: {
        type: Array,
        default: () => []
      },
      companyOptions: {
        type: Array,
        default: () => []
      },
    },
    data() {
      return {
        memberForm: {
          fuelStations: [],
          checkEmpCard: 1,
          isAllFuel: 1,
          creditStatus: 1,
          checkEmpCard: 1,
          timesUpperLimit: 9999,
          dailyUpperLimit: 99999,
          monthUpperLimit: 9999999,
          checkCarNo: 1
        },
        saveLoading: false,
        dialogMemberVisible: false,
        rules: {
          memberName: [{
            required: true,
            message: '必输项',
            trigger: ['change', 'blur']
          }],
          phoneNum: [{
              required: true,
              message: '必选项',
              trigger: ['change', 'blur']
            },
            {
              validator: validator.mobile,
              trigger: ['blur']
            }
          ],
          carNo: [{
              required: true,
              message: '必选项',
              trigger: ['change', 'blur']
            },
            {
              validator: validator.carNo,
              trigger: ['blur']
            }
          ],
          // isAllFuel: [{
          //   required: true,
          //   message: '必选项',
          //   trigger: ['change', 'blur']
          // }],
          // fuelStations: [{
          //   required: true,
          //   message: '必选项',
          //   trigger: ['change', 'blur']
          // }],
          // isAllCharge: [{required: true, message: '必选项', trigger: ['change', 'blur']}],
          // chargeStations: [{required: true, message: '必选项', trigger: ['change', 'blur']}]
        }
      }
    },
    created() {

    },
    methods: {
      open(row) {
        // console.log(row)
        if (row) {
          if ((row.card + '').indexOf('4') == 0)
            row.useEcard = true
          this.memberForm = row;
        } else {
          this.memberForm = {
            fuelStations: [],
            isAllFuel: 1,
            // creditStatus: 1,
            checkEmpCard: 0,
            timesUpperLimit: 9999,
            dailyUpperLimit: 99999,
            monthUpperLimit: 9999999,
            checkCarNo: 0,
            useEcard: true
          }
        }
        this.dialogMemberVisible = true;
        this.$nextTick(() => {
          this.$refs.memberRef.clearValidate();
        })
      },
      saveMember() {
        this.$refs.memberRef.validate(valid => {
          if (valid) {
            // if (this.memberForm.creditStatus === 1 && !this.memberForm.creditAmt) {
            //   this.$message.warning('透支金额未填');
            //   return
            // }
            const model = deepClone(this.memberForm);
            model.fuelStation = model.isAllFuel === 0 ? model.fuelStations.join(',') : '';
            model.chargeStation = model.fuelStation;
            model.isAllCharge = model.isAllFuel;
            delete model.fuelStations;
            this.saveLoading = true;
            try {
              if (this.memberForm.memberId) {
                updateMember({
                  ...model
                }).then(res => {
                  if (res.code === 200) {
                    this.$message.success('修改成功');
                    this.cancelFn('memberRef', 'dialogMemberVisible');
                    this.$emit('on-success')
                  } else {
                    this.$message.danger(res.message)
                  }
                })
              } else {
                saveMember({
                  ...model
                }).then(res => {
                  if (res.code === 200) {
                    this.$message.success('保存成功');
                    this.cancelFn('memberRef', 'dialogMemberVisible');
                    this.$emit('on-success')
                  } else {
                    this.$message.danger(res.message)
                  }
                })
              }
            } catch (error) {
              this.saveLoading = false;
            } finally {
              this.saveLoading = false;
            }
          }
        })
      },
      cancelFn(refName, visibleName) {
        if (refName) {
          this.$refs[refName].resetFields();
        }
        this[visibleName] = false;
      },
    }
  }
</script>

<style>

</style>
